{% extends 'IcsocUIBundle::page.html.twig' %}
{% from 'IcsocUIBundle:Macro:grid.html.twig' import gridWidth,gridNav,gridConfig %}
{% from 'IcsocUIBundle:Macro:actions.html.twig' import timebutton,searchtime,searchForm,searchFormBtn %}

{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@datepicker_css'
    '@jqgird_css'
    '@gritter_css'
    '@chosen_css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

{% block content %}
    <form action="javascript:search()" method="post" id="searchForm">
        <div class="widget-container-col">
            <div class="widget-box">
                <div class="widget-body">
                    <div class="widget-main no-padding">
                        <table class="table table-bordered table-hover no-padding">
                            <tbody>
                            <tr>
                                <td colspan="4" class="text-center line-height-0">
                                    <button type="button" class="btn btn-white btn-primary btn-sm" onclick="fnSetTime(1)">{{ 'Yesterday'|trans }}</button>
                                    <button type="button" class="btn btn-white btn-primary btn-sm" onclick="fnSetTime(2)">{{ 'Today'|trans }}</button>
                                    <button type="button" class="btn btn-white btn-primary btn-sm" onclick="fnSetTime(3)">{{ 'Last Week'|trans }}</button>
                                    <button type="button" class="btn btn-white btn-primary btn-sm" onclick="fnSetTime(4)">{{ 'This Week'|trans }}</button>
                                    <button type="button" class="btn btn-white btn-primary btn-sm" onclick="fnSetTime(5)">{{ 'Last Month'|trans }}</button>
                                    <button type="button" class="btn btn-white btn-primary btn-sm" onclick="fnSetTime(6)">{{ 'This Month'|trans }}</button>
                                </td>
                            </tr>
                            <tr>
                                <td class="col-xs-2 align-right align-middle" style="border-right-width: 0px;">
                                    <label for="phone">号码:</label>
                                </td>
                                <td class="col-xs-4" style="border-left-width: 0px;">
                                    <input type="text" id="phone" name='phone' class="col-xs-12 col-sm-6 input-sm" />
                                </td>
                                <td class="col-xs-2 align-right align-middle" style="border-right-width: 0px;">
                                    <label for="call_type">呼叫类型:</label>
                                </td>
                                <td class="col-xs-4" style="border-left-width: 0px;">
                                    <select id="call_type" name="call_type" style="width:18%;" class="chosen-select col-xs-12 col-sm-6">
                                        {#<option value="-1" selected>全部</option>#}
                                        <option value="2" selected>呼入</option>
                                        <option value="1">呼出</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td class="col-xs-2 align-right align-middle" style="border-right-width: 0px;">
                                    <label for="least_count">最少次数:</label>
                                </td>
                                <td class="col-xs-4" style="border-left-width: 0px;">
                                    <input type="text" id="least_count" name='least_count' value="2" class="col-xs-12 col-sm-6 input-sm" />
                                </td>
                                <td class="col-xs-2 align-right align-middle" style="border-right-width: 0px;">
                                    <label for="most_count">最大次数:</label>
                                </td>
                                <td class="col-xs-4" style="border-left-width: 0px;">
                                    <input type="text" id="most_count" name='most_count' value="" class="col-xs-12 col-sm-6 input-sm" />
                                </td>
                            </tr>
                            {{ searchtime(date.today.start, date.today.end) }}
                            {{ searchFormBtn() }}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <table id="grid-table"></table>
    <div id="grid-pager"></div>
{% endblock %}
{% block footer %}
    {% javascripts
    '@datepicker_js'
    '@jqgird_js'
    '@gritter_js'
    '@common_js'
    '@chosen_js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script type="text/javascript">
        var height =  $(document).height() - 350;
        var isSpecial = {{ isSpecial }};
        $(function () {
            $('#start_time').datetimepicker({locale:'zh-cn',format:'YYYY-MM-DD',widgetPositioning:{horizontal:'left'}});
            $('#end_time').datetimepicker({locale:'zh-cn',format:'YYYY-MM-DD',widgetPositioning:{horizontal:'left'}});
            $('.chosen-select').chosen({width: $(".col-sm-6").width()+10+'px', allow_single_deselect:true,disable_search: true});
            if (isSpecial == 1) {
                $('.forBaidu').hide();
            }
        });

        jQuery(function($) {
            {{ gridWidth() }}
            jQuery(grid_selector).jqGrid({
                caption: "通话重复号码统计报表",
                url: "{{ path('icsoc_report_repetition_phone_data') }}",
                mtype: 'POST',
                datatype: "json",
                hidegrid:false,
                postData: {param:jsonToString(getCondition())},
                colModel:[
                    {name:'phone' , index:'phone' , label: '号码' , width:100 , sortable:false },
                    {name:'call_type' , index:'call_type' , label: '呼叫类型' ,width:100, sortable:false },
                    {name:'dial_num' , index:'dial_num' , label: '拨号数量' , width:100 , sortable:false },
                    {name:'connect' , index:'connect' , label: '接通数量' ,width:100, sortable:false },
                    {name:'no_connect' , index:'no_connect' , label: '未接通数量' ,width:100, sortable:false },
                    {name:'connect_rate' , index:'connect_rate' , label: '接通比例' , width:100 , sortable:false }
                ],
                {{ gridConfig(true) }}
                height: height,
                rownumWidth: 40,
                rowNum: -1,
                multiselect: false
            });
            {{ gridNav(false,false,false,false,true,false) }}
            jQuery(grid_selector).navButtonAdd(
                    pager_selector,
                    {
                        caption:'{{ 'Export Csv'|trans }}',
                        buttonicon:'ace-icon fa fa-file-excel-o  primary',
                        onClickButton:function() {
                            location.href = "{{ path('icsoc_report_repetition_phone_data', {'export': 'csv'})|raw }}&param="+jsonToString(getCondition());
                        }
                    }
            ).navButtonAdd(
                    pager_selector,
                    {
                        caption:'{{ 'Export Excel'|trans }}',
                        buttonicon:'ace-icon fa fa-file-excel-o  primary',
                        onClickButton:function() {
                            location.href = "{{ path('icsoc_report_repetition_phone_data', {'export': 'excel'})|raw }}&param="+jsonToString(getCondition());
                        }
                    }
            );
        });

        jQuery(function($) {
            $('#loading-btn').on(ace.click_event, function () {
                search();
            });
        });

        /**
         * 重置
         */
        function resetBtn()
        {
            $('#searchForm')[0].reset();
            $(".chosen-select").trigger("chosen:updated");
            search();
        }

        /**
         * 搜索
         */
        function search()
        {
            $('#grid-table').setGridParam({page:1,postData:{param:jsonToString(getCondition())}}).trigger("reloadGrid");
        }

        /**
         * 获取搜索条件
         */
        function getCondition()
        {
            var $start_time = $('#start_time');
            //var $end_time = $('#end_time');

            if (!$start_time.val()) {
                $start_time.parent().parent().addClass('has-error');
                $start_time.focus();
                return;
            }

            /*if (!$end_time.val()) {
                $end_time.parent().parent().addClass('has-error');
                $end_time.focus();
                return;
            }*/

            var param = {};

            param.phone = $('#phone').val();
            param.call_type = $('#call_type').val();
            var leastCount = $('#least_count').val();
            if (!leastCount || leastCount < 2 || isNaN(leastCount)) {
                gritterAlert('提示:', '最少次数2次且只能是数字', 'error');
                $('#least_count').val(2);
                return;
            }
            var mostCount = $('#most_count').val();
            if (mostCount != '' && isNaN(mostCount)) {
                gritterAlert('提示:', '最大次数只能是数字', 'error');
                $('#most_count').val('');
                return;
            }
            param.least_count = $('#least_count').val();
            param.most_count = $('#most_count').val();
            param.start_time = $.trim($('#start_time').val());
            param.end_time = $.trim($('#end_time').val());
            var timestamp1 = transdate(param.start_time);
            var timestamp2 = transdate(param.end_time);
            if (timestamp2 - timestamp1 > 2592000) {
                gritterAlert('提示:', '时间间隔最多31天', 'error');
                $('#searchForm')[0].reset();
                return;
            }

            return param;
        }

        /**
         * 设置时间
         *
         * @param type
         */
        function fnSetTime(type)
        {
            var $start_time = $('#start_time');
            var $end_time = $('#end_time');

            switch (type) {
                case 1:
                    $start_time.val('{{ date.yestoday.start }}');
                    $end_time.val('{{ date.yestoday.end }}');
                    break;
                case 2:
                    $start_time.val('{{ date.today.start }}');
                    $end_time.val('{{ date.today.end }}');
                    break;
                case 3:
                    $start_time.val('{{ date.lastweek.start }}');
                    $end_time.val('{{ date.lastweek.end }}');
                    break;
                case 4:
                    $start_time.val('{{ date.thisweek.start }}');
                    $end_time.val('{{ date.thisweek.end }}');
                    break;
                case 5:
                    $start_time.val('{{ date.lastmonth.start }}');
                    $end_time.val('{{ date.lastmonth.end }}');
                    break;
                case 6:
                    $start_time.val('{{ date.thismonth.start }}');
                    $end_time.val('{{ date.thismonth.end }}');
                    break;
                case 7:
                    $start_time.val('{{ date.thisyear.start }}');
                    $end_time.val('{{ date.thisyear.end }}');
                    break;
                case 8:
                    $start_time.val('{{ date.lastyear.start }}');
                    $end_time.val('{{ date.lastyear.end }}');
                    break;
            }

            search();
        }

        function transdate(endTime){
            var date=new Date();
            date.setFullYear(endTime.substring(0,4));
            date.setMonth(endTime.substring(5,7)-1);
            date.setDate(endTime.substring(8,10));
            date.setHours(endTime.substring(11,13));
            date.setMinutes(endTime.substring(14,16));
            date.setSeconds(endTime.substring(17,19));
            return Date.parse(date)/1000;
        }
    </script>
{% endblock %}